<template>
  <div>
    <table id="my_table">
      <thead>
        <tr>
          <slot name="thead">表头</slot>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td>
            {{ item.id }}
          </td>
          <td>
            {{ item.name }}
          </td>
          <td>
            <img :src="item.picUrl" />
          </td>
          <td>{{ item.desc }}</td>
          <td><slot name="tag" :item="item">{{ item.tag }}</slot></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    data: Array,
  },
  data() {
    return {};
  },
};
</script>

<style lang="css" scoped>
#my_table {
  font-size: 12px;
  display: table;
  width: 100%;
  border: solid 1px #aaa;
}
td {
  border: solid 1px black;
}
</style>
